import './index.css'

import { Button, Input, Modal, message } from 'antd'
import { commodity, historyList } from '@/types/order/order'
import { useEffect, useState } from 'react'
import { useHistoryadd, useOrdercancel, useOrderdateil } from '@/api/query'

import { InfoCircleOutlined } from '@ant-design/icons'
import Svg from '@/components/SvgIcon'
import useCrud from '@/api/CRUD/useCrud'
import { useLocation } from 'react-router-dom'

export default function Index() {
  const location = useLocation()
  const [id, setId] = useState<string>('')
  const { useItems } = useCrud()
  const { data, isLoading, isError } = useItems('/order/orderdateil', 1, 2, {
    id
  })
  useEffect(() => {
    if (location.state) {
      setId(location.state)
    }
  }, [location])
  const [ids, setid] = useState<string | undefined>()
  const { mutate } = useOrdercancel(ids)
  const cancel = () => {
    setid(data.data._id)
    mutate()
    message.info('取消成功')
  }
  const [modal1Open, setModal2Open] = useState(false)
  const [obj, setobj] = useState<object>({})
  const [note, setnote] = useState<string>()
  const { mutate: mutateAdd } = useHistoryadd(obj)
  const ok = () => {
    const datas = new Date()
    const createTime =
      datas.getFullYear() +
      '-' +
      (datas.getMonth() + 1) +
      '-' +
      datas.getDate() +
      ' ' +
      datas.getHours() +
      ':' +
      datas.getMinutes() +
      ':' +
      datas.getSeconds()
    const id = Date.now()
    const operateMan = data.data.UserAccount
    const orderstatus = data.data.status
    const payment = data.data.payType
    const history = data.data._id
    setobj({
      id: history,
      data: {
        id,
        operateMan,
        orderStatus: orderstatus,
        payment,
        note,
        createTime
      }
    })
    mutateAdd()
    setModal2Open(false)
  }
  if (isLoading) {
    return <div>Loding...</div>
  }
  if (isError) {
    return <div>Error...</div>
  }

  return (
    <div className="cont">
      {' '}
      <Modal
        title="操作备注："
        centered
        open={modal1Open}
        onOk={() => ok()}
        onCancel={() => setModal2Open(false)}
      >
        <p>
          操作备注：
          <Input
            placeholder="Basic usage"
            onBlur={(e) => setnote(e.target.value)}
          />
        </p>
      </Modal>
      <div className="con">
        <div className="head">
          <div style={{ color: 'red', fontSize: '20px' }}>
            <InfoCircleOutlined />
            当前订单状态:
            {data.data.status == 1
              ? '待付款'
              : data.data.status == 2
                ? '待发货'
                : data.data.status == 3
                  ? '已发货'
                  : data.data.status == 4
                    ? '已完成'
                    : '已关闭'}
          </div>
          <div>
            {data.data.status == 1 ? (
              '待付款'
            ) : data.data.status == 2 ? (
              <div>
                {' '}
                <Button>修改收货人信息</Button>{' '}
                <Button onClick={() => cancel()}>取消订单</Button>{' '}
                <Button onClick={() => setModal2Open(true)}>备注订单</Button>
              </div>
            ) : data.data.status == 3 ? (
              <Button onClick={() => setModal2Open(true)}>备注订单</Button>
            ) : data.data.status == 4 ? (
              <Button onClick={() => setModal2Open(true)}>备注订单</Button>
            ) : (
              <div>
                <Button onClick={() => setModal2Open(true)}>备注订单</Button>
              </div>
            )}
          </div>
        </div>
        <div className="basic">
          <div style={{ alignContent: 'center' }}>
            <Svg name="shuqian"></Svg>
            <span> 基本信息</span>
          </div>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
              <div className="basic-item">订单编号</div>
              <div className="basic-item">用户账号</div>
              <div className="basic-item">支付方式</div>
              <div className="basic-item">订单来源</div>
              <div className="basic-item">订单类型</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
              <div className="basic-items">{data.data.number}</div>
              <div className="basic-items">{data.data.UserAccount}</div>

              <div className="basic-items">
                {data.data.payType ? '支付宝' : '微信'}
              </div>
              <div className="basic-items">
                {data.data.sourceType ? 'PC订单' : 'app订单'}
              </div>
              <div className="basic-items">
                {data.data.orderType ? '正常订单' : '秒杀订单'}
              </div>
            </div>
          </div>
        </div>
        <div className="consignee">
          <div style={{ alignContent: 'center' }}>
            <Svg name="shuqian"></Svg>
            <span> 基本信息</span>
          </div>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
              <div className="consignee-item">收货人</div>
              <div className="consignee-item">手机号</div>
              <div className="consignee-item">邮政编码</div>
              <div className="consignee-item">收货地址</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
              <div className="consignee-items">{data.data.receiverName}</div>
              <div className="consignee-items">{data.data.receiverPhone}</div>
              <div className="consignee-items">{data.data.orderNumber}</div>
              <div className="consignee-items">{data.data.receiverCity}</div>
            </div>
          </div>
        </div>
        <div className="shop">
          <div style={{ alignContent: 'center' }}>
            <Svg name="shuqian"></Svg>
            <span>商品信息</span>
          </div>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
              <div className="shop-item">商品图片</div>
              <div className="shop-item" style={{ width: '150%' }}>
                商品名称
              </div>
              <div className="shop-item">价格</div>
              <div className="shop-item">属性</div>
              <div className="shop-item">数量</div>
              <div className="shop-item">小计</div>
            </div>
            {data.commodity.map((item: commodity) => {
              return (
                <div
                  key={item._id}
                  style={{ display: 'flex', justifyContent: 'space-evenly' }}
                >
                  <div className="shop-items">
                    <img
                      style={{ width: '100px' }}
                      src={item.productPic}
                      alt=""
                    />
                  </div>
                  <div className="shop-items" style={{ width: '150%' }}>
                    <p>{item.productBrand}</p>
                    <p style={{ padding: '10px' }}>品牌: {item.productName}</p>
                  </div>
                  <div className="shop-items">￥{item.productPrice}</div>
                  <div className="shop-items">
                    <p>颜色:{item.productcolor}</p>
                    <p>容量:{item.productSize}G</p>
                  </div>
                  <div className="shop-items">{item.productQuantity}</div>
                  <div className="shop-items">
                    ￥{item.productQuantity * item.productPrice}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        <div className="operation">
          <div style={{ alignContent: 'center' }}>
            <Svg name="shuqian"></Svg>
            <span>操作信息</span>
          </div>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
              <div className="operation-item">操作者</div>
              <div className="operation-item" style={{ width: '150%' }}>
                操作时间
              </div>
              <div className="operation-item">订单状态</div>
              <div className="operation-item">付款状态</div>
              <div className="operation-item">发货状态</div>
              <div className="operation-item">备注</div>
            </div>
            {data.historyList.map((item: historyList) => {
              return (
                <div
                  key={item._id}
                  style={{ display: 'flex', justifyContent: 'space-evenly' }}
                >
                  <div className="operation-items">{item.operateMan}</div>
                  <div className="operation-items" style={{ width: '150%' }}>
                    {item.createTime}
                  </div>
                  <div className="operation-items">
                    {item.orderStatus ? '已发货' : '未发货'}
                  </div>
                  <div className="operation-items">
                    {item.payment ? '已支付' : '未支付'}
                  </div>
                  <div className="operation-items">
                    {item.orderStatus ? '已发货' : '未发货'}
                  </div>
                  <div className="operation-items">{item.note}</div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}
